<template>
    <view class="uni-grid-wrap">
        <view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }"
              :style="{ 'border-left-color':borderColor}">
            <slot/>
        </view>
    </view>
</template>

<script>
    // #ifdef APP-NVUE
    const dom = uni.requireNativePlugin('dom');
    // #endif

    /**
     * Grid 宫格
     * @description 宫格组件
     * @tutorial https://ext.dcloud.net.cn/plugin?id=27
     * @property {Number} column 每列显示个数
     * @property {String} borderColor 边框颜色
     * @property {Boolean} showBorder 是否显示边框
     * @property {Boolean} square 是否方形显示
     * @property {Boolean} Boolean 点击背景是否高亮
     * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
     */
    export default {
        name: 'UniGrid',
        emits: ['change'],
        props: {
            // 每列显示个数
            column: {
                type: Number,
                default: 3
            },
            // 是否显示边框
            showBorder: {
                type: Boolean,
                default: true
            },
            // 边框颜色
            borderColor: {
                type: String,
                default: '#D2D2D2'
            },
            // 是否正方形显示,默认为 true
            square: {
                type: Boolean,
                default: true
            },
            highlight: {
                type: Boolean,
                default: true
            }
        },
        provide() {
            return {
                grid: this
            }
        },
        data() {
            const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
            return {
                elId,
                width: 0
            }
        },
        created() {
            this.children = []
        },
        mounted() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            init() {
                setTimeout(() => {
                    this._getSize((width) => {
                        this.children.forEach((item, index) => {
                            item.width = width
                        })
                    })
                }, 50)
            },
            change(e) {
                this.$emit('change', e)
            },
            _getSize(fn) {
                // #ifndef APP-NVUE
                uni.createSelectorQuery()
                    .in(this)
                    .select(`#${this.elId}`)
                    .boundingClientRect()
                    .exec(ret => {
                        this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
                        fn(this.width)
                    })
                // #endif
                // #ifdef APP-NVUE
                dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
                    this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
                    fn(this.width)
                })
                // #endif
            }
        }
    }
</script>

<style lang="scss">
    .uni-grid-wrap {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: column;
        /* #ifdef H5 */
        width: 100%;
        /* #endif */
    }

    .uni-grid {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        // flex: 1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .uni-grid--border {
        position: relative;
        /* #ifdef APP-NVUE */
        border-left-color: #D2D2D2;
        border-left-style: solid;
        border-left-width: 0.5px;
        /* #endif */
        /* #ifndef APP-NVUE */
        z-index: 1;
        border-left: 1px #D2D2D2 solid;
        /* #endif */
    }
</style>
